<html>

<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery/jquery.timers.js"></script><!--定时器-->
<style>
.routeTabclass{
	border: 1px solid #000fd0;
}
.routeTabclass td{
	border: 1px solid #000fd0;
}


</style>
<script>
    /**
     * 当选择车辆的窗口选择后，触发回调
     */
	function onVehicleSelected(vehicleId, _plateNo, simNo) {
		$("#routePlateNo").textbox('setValue', _plateNo);
	}
	
	$(document).ready(function () {
		$("body").oneTime("300ms", "insertPlateNo", function () {
			try {
				// console.log("开始获取车牌号");
				var treeManager = $.fn.zTree.getZTreeObj("vehicleTree");
				// console.log(treeManager);
				var nodes = treeManager.getSelectedNodes();
				// if(nodes.length <= 0){
				// 	nodes = treeManager.getCheckedNodes();
				// }
				// console.log(nodes);
				if (nodes && nodes.length > 0) {
					for (var i = 0; i < nodes.length; i++) {
						var node = nodes[i];
						if (node.id.indexOf("v") >= 0) {
							$("#routePlateNo").textbox('setValue', node.attributes["plateNo"]);
							return;
						}
					}
					//设置历史轨迹里的车牌号
				}
			} catch (error) {
				console.log("历史轨迹中获取选中车辆错误：" + error);
			}
		});

		

		//倒放复选框事件
		$("#playOrderCheck").click(function () {
			var obj = document.getElementById("playOrderCheck");
			if (obj) {
				if (HistoryRoutePanel) {
					HistoryRoutePanel.setPlayOrder(!obj.checked);
				}
			}
		});
		//显示停车点复选框事件
		$("#showVehicleStopPointCheck").click(function () {
			var obj = document.getElementById("showVehicleStopPointCheck");
			if (obj) {
				if (HistoryRoutePanel) {
					HistoryRoutePanel.setShowVehicleStopPoint(obj.checked);
				}
			}
		});
	});

	//滑动块事件
	function onProgressValueChange(newVal) {
		// console.log(" newVal = " + newVal);

		if(!solideFlg){
			return;
		}

		var rowDatas = $("#hisDataGrid").datagrid("getRows");
		if (rowDatas.length > 0) {
			var indexTemp = parseInt(rowDatas.length * newVal / 100) - 1;
			// console.log("总行数 ： " + rowDatas.length + " , 当前行 ：" + indexTemp);
			if (!isNaN(indexTemp) && indexTemp >= 0) {
				//选中指定行
				$("#hisDataGrid").datagrid("selectRow", indexTemp);
				//播放器设置指定行
				if (HistoryRoutePanel && HistoryRoutePanel.routeMapHandler) {
					var rowData = rowDatas[indexTemp];
					// console.log(rowData);
					if (rowData) {
						if (typeof (rowData.latitude) != "undefined" && typeof (rowData.longitude) != "undefined") {
							HistoryRoutePanel.routeMapHandler.setCenter(rowData.latitude, rowData.longitude);//设置中心
							HistoryRoutePanel.routeMapHandler.drawRoute(rowData);//设置轨迹
						}
						HistoryRoutePanel._nCount = indexTemp;
					}

				}
			}
		}
	}
	
	//格式化滑块数值
	function progressTipFormat(value) {
		return (value + "%");
	}

	var forwardTimerName = null;

	//开始前进事件，flg为1表示前进，flg为-1表示后退
	function startForward(flg){
		var num =1;//计数器，初始化为1
		console.log("第一次执行");
		setForward(flg);//首先执行一次
		console.log("第一次执行完毕");

		var addNum = flg;//移动值
		forwardTimerName = window.setInterval(function(){
			console.log("定时器启动 : "+addNum);
			setForward(addNum);
			num ++;
			var temp = parseInt(num / 4) +1;
			addNum = addNum > 0 ? temp : -temp ;
		},300);
	}

	//停止前进事件
	function stopForward(){
		if(forwardTimerName != null){
			console.log("定时器关闭");
			window.clearInterval(forwardTimerName);
		}
	}

	//前进按钮点击事件
	function setForward(flg){
		var value = $('#routeProgressbar2').slider('getValue');
		value = parseInt(value);
		if(!isNaN(value)){
			value += flg;
			if(value >= 100){
				value = 100;
			}
		}
		// $('#routeProgressbar2').slider('setValue',value);
		setUpdateSoliderValue(value);
		console.log("forward : "+value);
	}
	
	//更新滑块的值
	function setUpdateSoliderValue(value){
		solideFlg = true;
		$('#routeProgressbar2').slider('setValue',value);
		// onProgressValueChange(value);
		solideFlg = false;
	}

	var solideFlg = false;//定义滑块滑动标记
	//当开始滑动滑块时实现
	function solideStart(){
		solideFlg = true;
		console.log("滑块开始滑动 : " + solideFlg);
	}
	
	function solideEnd(){
		solideFlg = false;
		console.log("滑块停止滑动 : " + solideFlg);
	}



</script>
</head>
<body>
<div id="hisRouteLayout" class="easyui-layout" data-options="fit:true">
	<div data-options="region:'north'" style="height:80px">
		<form id="routeForm" method="post">
			<table cellpadding="5" >
				<tr>
					<td>车牌号:</td>
					<td><input class="easyui-textbox" type="text" name="plateNo" id="routePlateNo" data-options="required:true" style="width:80px;"
						 value="1" />

						<button id="btnSelectVehicle" type="button" class="button green small" onclick=" InfoWindow.selectVehicle();"><i
							 class="fa fa-search"></i> </button>
					</td>
					<td>回放时间:</td>
					<td>
						<input class="easyui-datetimebox" name="startTime" id="routeStartTime" required date style="width:150px" value="2014-09-28 11:22:13"></input>
						至
						<input class="easyui-datetimebox" name="endTime" id="routeEndTime" required date style="width:150px" value="2014-09-29 23:22:13"></input>

						<select class="easyui-combobox" id="selDateOption" data-options="panelHeight:100,value:'当天'">
							<option value="1">当天</option>
							<option value="2">昨天</option>
							<option value="3">前天</option>
							<option value="4">最近一天</option>
						</select>
					</td>
					<td colspan=3>
						最低速度 : <input id="minSpeed" name="minSpeed" class="easyui-numberspinner" style="width:40px;" value="1"></input>(单次最多查询四天的数据)
					</td>
					<td>
						<input type="checkbox" id="cbDisplayHisData" /> 显示GPS数据栏
						&nbsp;
						<input id="showVehicleStopPointCheck" type="checkbox" value="false" />&nbsp;显示停车点
						&nbsp;
						<input id="showVehicleUnvalidPoint" type="checkbox" value="false" />&nbsp;无效定位
					</td>

				</tr>
				<tr>
					<td>播放速度:</td>
					<td colspan=1>
						<div id="playSpeedSlider" style="width:100px"></div>

					</td>
					<td colspan=2>
						<a id="btnQueryHisData" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
						<a id="btnPlayRoute" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-play',disabled:true">播放</a>
						<a id="btnPauseRoute" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:true">暂停</a>
						<a id="btnStopPlayRoute" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no',disabled:true">停止</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<a id="btnExportHisData" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel'">导出</a>
						<input type="checkbox" id="cbShowRouteBeforePlay" checked /> 先生成轨迹后播放
						<input id="playOrderCheck" type="checkbox" value="false" />&nbsp;倒放
						
					</td>
					<td align="right"><input type="button" value="后退" onmousedown="javascript:startForward(-1);" onmouseup="javascript:stopForward();"></td>
					<td align="center">
						<!-- <div id="routeProgressbar" class="easyui-progressbar" style="width:200px;display:none;"></div> -->
						<input id="routeProgressbar2" class="easyui-slider" style="width:150px;" data-options=" 
									                            showTip: true,value:0,
																mode: 'h',min:0,max:100,step:1,onChange:onProgressValueChange,tipFormatter:progressTipFormat,
																onSlideStart:solideStart,onSlideEnd:solideEnd,
																reversed: false">
						<!-- <a href="#" class="easyui-linkbutton">前进</a> -->
					</td>
					<td align="left"><input type="button" value="前进" onmousedown="javascript:startForward(1);" onmouseup="javascript:stopForward();"></td>
					<td>
						<span id="hisMileage" style="color:red"></span>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div data-options="region:'south',split:true" style="height:220px;">

		<div id="hisDataTab" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
			<div title="历史GPS数据" style="padding:0px">
				<div id="hisDataGrid"></div>
			</div>

			<div title="历史停车记录" style="padding:0px">
				<div id="parkingGrid"></div>
			</div>

		</div>

	</div>
	<div data-options="region:'center',border:true">
		<iframe id="routeMapFrame" scrolling="no" frameborder="0" src="" style="width:100%;height:99%;"></iframe>
	</div>
</div>
</body>
</html>